<script setup>
import { addYunDuoBookApi } from '@/apis/index';

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	book:{
		type: Object,
		default: {}
	}
}) 	
const emit = defineEmits(['onClose'])
const addBook = async () =>{
	try{
		const { id } = props.book
		await addYunDuoBookApi({booksId: id})
		uni.showToast({
			title:'添加成功~',
			icon:'none'
		})
	}catch(e){
		console.error(e)
	}
}
const quicklLook = () =>{
	const { id } = props.book
	uni.navigateTo({
		url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id}))}`,
	})
}
</script>

<template>
	<view class="mask" v-show="props.show" @click="emit('onClose')">
		<view class="container">
			<view class="wrapper">
				<image :src="props.book?.cover"/>
				<text>需要把这本书加到首页吗?</text>
				<view class="wrapper-footer">
					<view class="cancel" @click="quicklLook">先看看</view>
					<view class="confrim" @click="addBook">立即添加</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100vh;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
}
.wrapper{
  width: 600rpx;
  height: 600rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  position: relative;
  padding-top: 346rpx;
  box-sizing: border-box;
	image{
		position: absolute;
		bottom: 319rpx;
		left: 135rpx;
		width: 330rpx;
		height: 440rpx;
		background: #EEF4FF;
		border-radius: 16rpx;
	}
	text{
		font-size: 44rpx;
		font-weight: bold;
		color: #000000;
		display: block;
		margin-left: 48rpx;
		font-family: Chill Round Gothic;
	}
}
.wrapper-footer{
	width: calc(100% - 32px);
	height: 80rpx;
	display: flex;
	margin: 69rpx 32rpx 0 32rpx;
	justify-content: space-between;
	.cancel{
		width: 230rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFF;
		border-radius: 30rpx;
		font-family: Chill Round Gothic;
		background: linear-gradient( 315deg, #cdebe1 0%, #ceebff 100%);
	}
	.confrim{
		width: 230rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #FFF;
		border-radius: 30rpx;
		font-family: Chill Round Gothic;
		background: linear-gradient( 315deg, #68edc5 0%, #51b7ff 100%);
	}
}	
</style>